<template>
	<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
		<div>
			<!--    功能区-->
			<div style="margin: 10px 0">
				<!--    搜索区-->
				<div style="margin: 10px 0">
					<el-input v-model="searchPARAM.username" clearable placeholder="请输入用户名"  style="width: 15%" />
					<el-input v-model="searchPARAM.name" clearable placeholder="请输入昵称"  style="width: 15%" />
					<el-input v-model="searchPARAM.openId" clearable placeholder="请输入openID"  style="width: 15%" />
					<el-select v-model="searchPARAM.status" placeholder="请选择状态" clearable="" style="width: 15%">
						<el-option label="正常" value="1"></el-option>
						<el-option label="冻结" value="0"></el-option>
					</el-select>
					<el-select v-model="searchPARAM.roleId" placeholder="请选择权限"  clearable="" style="width: 15%">
						<el-option label="管理员" value="1"></el-option>
						<el-option label="普通用户" value="2"></el-option>
					</el-select>
					
					<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
					<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
					<div style="float: right">
						<el-tooltip content="添加" placement="top">
							<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
		<!--表格-->
		<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
			<el-table-column label="#" type="index" />
			<el-table-column label="微信ID" prop="openId">
				<template v-slot="scope">
					<label v-if="scope.row.openId==null">未绑定微信小程序</label>
				</template>
			</el-table-column>
			<el-table-column label="用户名" prop="username">
				<template v-slot="scope">
					<label v-if="scope.row.username==''">未绑定用户</label>
				</template>
			</el-table-column>
			<el-table-column label="昵称" prop="name" />
			<el-table-column label="创建时间" prop="createTime" sortable width="180px" />
			<el-table-column label="状态" prop="status">
				<template v-slot="scope">
					<el-tag class="ml-2" type="success" v-if="scope.row.status=='1'">正常</el-tag>
					<el-tag class="ml-2" type="errors" v-if="scope.row.status=='0'">冻结</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column label="权限" prop="roleId">
				<template v-slot="scope">
					<el-tag class="ml-2" type="warning" v-if="scope.row.roleId=='1'">管理员</el-tag>
					<el-tag class="ml-2" type="info" v-if="scope.row.roleId=='2'">普通用户</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column label="密码">
			
			<template #default="scope">
				<el-popconfirm title="确认重置？" @confirm="handleChangePassword(scope.row)">
					<template #reference>
						<el-button type="danger">重置密码</el-button>
					</template>
				</el-popconfirm>
			</template>
			</el-table-column>
			<!--      操作栏-->
			<el-table-column label="操作" width="130px">
				<template #default="scope">
					<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
						<template #reference>
							<el-button icon="Delete" type="danger"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div style="margin: 10px 0">
			<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>

		<!--弹窗-->
		<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="账号" prop="username">
					<el-input v-model="form.username" :disabled="judge" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password"  v-if="!judge">
					<el-input v-model="form.password" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="name">
					<el-input v-model="form.name" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model.number="form.status">
						<el-radio  :label="1">正常</el-radio>
						<el-radio  :label="0">冻结</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="roleId">
					<el-radio-group v-model.number="form.roleId">
						<el-radio :label="1">管理员</el-radio>
						<el-radio :label="2">普通用户</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</span>
			</template>
		</el-dialog>


	</el-card>

</template>

<script src="@/assets/js/User.js"></script>


